<template>
    <div>
        <div class="header" style="background-color: white">
            <el-page-header @back="goBack" content="我的收支">
            </el-page-header>
        </div>
        <el-divider></el-divider>

        <el-form>
            <el-container>
                <el-form-item>
                    <el-input v-model="cwinouttype.case_no" placeholder="案号" style="width: 150px" clearable></el-input>
                </el-form-item>
                <el-form-item style="margin-left: 20px">
                    <el-cascader placeholder="请选择收入类型" clearable
                                 v-model="cwinouttype.id"
                                 :options="options"
                                 :props="{ expandTrigger: 'hover' ,checkStrictly:true,emitPath:true }"
                                 @change="handleChange">
                    </el-cascader>
                </el-form-item>

                <el-form-item style="margin-left: 20px">
                    <el-select v-model="cwinouttype.cw_pay_type" clearable placeholder="请选择支付方式">
                        <el-option
                                v-for="item in payOption"
                                :key="item.cWPayType"
                                :label="item.payType"
                                :value="item.cWPayType">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item style="margin-left: 20px">
                    <el-cascader placeholder="请选择案件类型" clearable
                                 v-model="cwinouttype.caseTypeid"
                                 :options="CaseType"
                                 :props="{ expandTrigger: 'hover',value:'id',label:'caseTypeName',checkStrictly:true }"
                                 @change="handleChange1">
                    </el-cascader>
                </el-form-item>

                <el-form-item style="margin-left: 20px">
                    <el-date-picker
                            v-model="cwinouttype.starttime"
                            type="date"
                            placeholder="选择日期" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>

                <el-form-item style="margin-left: 20px">
                    <el-date-picker
                            v-model="cwinouttype.endtime"
                            type="date"
                            placeholder="选择日期" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>

                <el-form-item style="margin-left: 20px">
                    <el-button type="primary" @click="List()" icon="el-icon-search">检索</el-button>
                </el-form-item>
            </el-container>
        </el-form>

        <el-table
                :data="pageResult.records"
                border
                style="width: 100%;font-size: 18px;">
            <el-table-column
                    prop="cwName"
                    label="收支类型">
            </el-table-column>
            <el-table-column
                    prop="cwInoutDate"
                    label="发生日期">
            </el-table-column>
            <el-table-column
                    prop="cwInoutMoney"
                    label="收支金额">
            </el-table-column>
            <el-table-column
                    prop="cwPayType"
                    label="支付方式">
                <template slot-scope="scope">
                    {{payOption[scope.row.cwPayType-0-1].payType}}
                </template>
            </el-table-column>
            <el-table-column
                    prop="caseNo"
                    label="案号">
            </el-table-column>
            <el-table-column
                    prop="cwEnteringdate"
                    label="录入日期">
            </el-table-column>
            <el-table-column
                    prop="cwRemark"
                    label="备注">
            </el-table-column>
        </el-table>
        <div class="case-exam-footer">
            <el-pagination
                    class="pagination"
                    :page-size="pageResult.size"
                    @current-change="handleIndexChange" :current-page="pageResult.current"
                    :page-count="pageResult.pages" layout="prev, pager, next"
                    :total="pageResult.total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import CwinoutService from '../../../model/ww/cw_inout/CwInoutService'
    import CwInoutTypeService from '../../../model/ww/cw_inout_type/CwInoutTypeService'
    import CaseCasetypeService from '../../../model/ww/case_case_type/CaseCasetypeService'

    const cwinoutService = CwinoutService.getInstance()
    const cwInoutTypeService = CwInoutTypeService.getInstance();
    const caseCasetypeService = CaseCasetypeService.getInstance();

    export default {
        name: "myfinance",
        data() {
            return {
                pageResult: {},
                cwinouttype:{},
                params: {},
                options:[],
                payOption:[
                    {
                        cWPayType:'1',
                        payType:'网银'
                    },
                    {
                        cWPayType:'2',
                        payType:'银行卡'
                    },
                    {
                        cWPayType:'3',
                        payType:'支付宝'
                    },
                    {
                        cWPayType:'4',
                        payType:'微信'
                    },
                    {
                        cWPayType:'5',
                        payType:'其他'
                    }
                ],
                CaseType:[],
            }
        },
        methods: {
            goBack(){
                history.back()
            },
            List() {//查询或高级检索
                cwinoutService.list(this.params,this.cwinouttype).then((response) => {
                    this.pageResult = response.data.data
                })
            },

            handleIndexChange(index) {//分页拿到当前页传给后台
                this.params.page = index
                this.List()
            },

            handleChange(ids){//收入类型下拉框改变事件
                if(ids.length==3){
                    this.cwinouttype.id=ids[ids.length-1]
                }
                if(ids.length==2){
                    this.cwinouttype.id=ids[ids.length-1]
                }
                if(ids.length==1){
                    this.cwinouttype.id=ids[ids.length-1]
                }

            },
            handleChange1(ids2){//案件类型下拉框改变事件
                if(ids2.length==3){
                    this.cwinouttype.caseTypeid=ids2[ids2.length-1]
                }
                if(ids2.length==2){
                    this.cwinouttype.caseTypeid=ids2[ids2.length-1]
                }
                if(ids2.length==1){
                    this.cwinouttype.caseTypeid=ids2[ids2.length-1]
                }
            },
            selects() { //查询收入类型
                cwInoutTypeService.list().then((response) => {
                    this.options = response.data.data

                })
            },
            selects2(){ //查询案件类型
                caseCasetypeService.list().then((response) => {
                    this.CaseType = response.data.data

                })
            },

        },
        created() {  //一进来就渲染下拉框调用的方法
            this.List()
            this.selects()
            this.selects2()
        }
    }
</script>

<style scoped>
    .case-exam-footer{
        width: 100%;
        position: relative;
    }
    .pagination{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
</style>
